<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
    <meta charset="UTF-8">
    <title>DashBoard</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.8" />
    <link href="static/css/index.css" rel="stylesheet">
    <link href="static/css/github-card.css" rel="stylesheet" type="text/css">
    <link href="https://lib.baomitu.com/boxicons/2.1.4/css/boxicons.min.css" rel="stylesheet">
    <link crossorigin="anonymous" href="https://lib.baomitu.com/font-awesome/6.2.1/css/all.css" rel="stylesheet">
</head>
<body>
<div class="app-container">
    <div class="app-header">
        <div class="app-header-left">
            <span class="app-icon"></span>
            <p class="app-name">Zh-Website</p>
            <div class="search-wrapper">
                <label>
                    <input class="search-input" type="text" placeholder="Search">
                </label>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-search" viewBox="0 0 24 24">
                    <defs></defs>
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="M21 21l-4.35-4.35"></path>
                </svg>
            </div>
        </div>
        <div class="app-header-right">
            <button class="mode-switch" title="Switch Theme">
                <svg class="moon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="24" height="24" viewBox="0 0 24 24">
                    <defs></defs>
                    <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
                </svg>
            </button>
            <button class="notification-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
                    <path d="M13.73 21a2 2 0 0 1-3.46 0" /></svg>
            </button>
            <button class="profile-btn">
                <img src="static/images/zmh-program.png" alt=""/>
                <span>zmh-program</span>
            </button>
        </div>
        <button class="messages-btn">
            <i class='bx bxs-bar-chart-alt-2'></i>
        </button>
    </div>
    <div class="app-content">
        <div class="app-sidebar">
            <a href="" class="app-sidebar-link active"><i class='bx bx-line-chart'></i></a>
            <a href="geoip.html" class="app-sidebar-link"><i class='bx bx-analyse'></i></a>
            <a href="" class="app-sidebar-link"><i class='bx bx-calendar-alt'></i></a>
            <a href="" class="app-sidebar-link"><i class='bx bx-cog'></i></a>
        </div>
        <div class="projects-section">
            <div class="projects-section-header">
                <p>Server Data</p>
                <p class="right"></p>
            </div>
            <div class="projects-section-line">
                <div class="projects-status">
                    <div class="item-status">
                        <span class="status-number">2</span>
                        <span class="status-type">vCPU</span>
                    </div>
                    <div class="item-status">
                        <span class="status-number">4 G</span>
                        <span class="status-type">RAM</span>
                    </div>
                    <div class="item-status">
                        <span class="status-number">6 Mbps</span>
                        <span class="status-type">Peak Bandwidth</span>
                    </div>
                </div>
                <div class="view-actions">
                    <button class="view-btn list-view" title="List View">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list">
                            <line x1="8" y1="6" x2="21" y2="6" />
                            <line x1="8" y1="12" x2="21" y2="12" />
                            <line x1="8" y1="18" x2="21" y2="18" />
                            <line x1="3" y1="6" x2="3.01" y2="6" />
                            <line x1="3" y1="12" x2="3.01" y2="12" />
                            <line x1="3" y1="18" x2="3.01" y2="18" /></svg>
                    </button>
                    <button class="view-btn grid-view active" title="Grid View">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid">
                            <rect x="3" y="3" width="7" height="7" />
                            <rect x="14" y="3" width="7" height="7" />
                            <rect x="14" y="14" width="7" height="7" />
                            <rect x="3" y="14" width="7" height="7" /></svg>
                    </button>
                </div>
            </div>
            <div class="project-boxes without-scrollbar jsGridView">
                <div class="project-box-wrapper" id="cpu">
                    <div class="project-box" style="background-color: #fee4cb;">
                        <div class="project-box-header">
                            <span>Server CPU Monitor</span>
                            <div class="more-wrapper"><button class="project-btn-more"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1" /><circle cx="12" cy="5" r="1" /><circle cx="12" cy="19" r="1" /></svg></button></div>
                        </div>
                        <div class="project-box-content-header">
                            <p class="box-content-header"><i class="fa-solid fa-microchip"></i> CPU</p>
                            <p class="box-content-subheader">Intel(R) Xeon(R) Gold 6133 CPU @ 2.50 GHz * 1</p>
                        </div>
                        <div class="box-progress-wrapper">
                            <div class="box-progress-bar hidden"><span class="box-progress" style="width: 40%; background-color: unset;"></span></div>
                            <div class="percent"><svg><circle class="percent-chart" stroke="transparent" cx="70" cy="70" r="70" shape-rendering="geometricPrecision"></circle></svg><div class="number"><h2><span class="percent-value"></span><span>%</span></h2></div></div>
                            <p class="box-progress-percentage">0 %</p>
                        </div>
                        <div class="project-box-footer">
                            <div class="participants"></div>
                            <div class="footer-msg" style="color: #ff942e;">
                                2.50 GHz
                            </div>
                        </div>
                    </div>
                </div>
                <div class="project-box-wrapper" id="ram">
                    <div class="project-box" style="background-color: #e9e7fd;">
                        <div class="project-box-header">
                            <span>Server RAM Monitor</span>
                            <div class="more-wrapper"><button class="project-btn-more"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1" /><circle cx="12" cy="5" r="1" /><circle cx="12" cy="19" r="1" /></svg></button></div>
                        </div>
                        <div class="project-box-content-header">
                            <p class="box-content-header"><i class="fa-solid fa-memory"></i> RAM</p>
                            <p class="box-content-subheader">DDR4 4G * 1 (3694 MB)</p>
                        </div>
                        <div class="box-progress-wrapper">
                            <div class="box-progress-bar hidden"><span class="box-progress" style="width: 40%; background-color: unset;"></span></div>
                            <div class="percent"><svg><circle class="percent-chart" stroke="transparent" cx="70" cy="70" r="70" shape-rendering="geometricPrecision"></circle></svg><div class="number"><h2><span class="percent-value"></span><span>%</span></h2></div></div>
                            <p class="box-progress-percentage">0 %</p>
                        </div>
                        <div class="project-box-footer">
                            <div class="participants"></div>
                            <div class="footer-msg" style="color: #4f3ff0;">
                                3694 MB
                            </div>
                        </div>
                    </div>
                </div>
                <div class="project-box-wrapper" id="rom">
                    <div class="project-box">
                        <div class="project-box-header">
                            <span>Server ROM Usage</span>
                            <div class="more-wrapper"><button class="project-btn-more"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1" /><circle cx="12" cy="5" r="1" /><circle cx="12" cy="19" r="1" /></svg></button></div>
                        </div>
                        <div class="project-box-content-header">
                            <p class="box-content-header"><i class="fa-solid fa-hard-drive"></i> ROM</p>
                            <p class="box-content-subheader">SSD 60G * 1 (59G)</p>
                        </div>
                        <div class="box-progress-wrapper">
                            <div class="box-progress-bar hidden"><span class="box-progress" style="width: 40%; background-color: unset;"></span></div>
                            <div class="percent"><svg><circle class="percent-chart" stroke="transparent" cx="70" cy="70" r="70" shape-rendering="geometricPrecision"></circle></svg><div class="number"><h2><span class="percent-value"></span><span>%</span></h2></div></div>
                            <p class="box-progress-percentage">0 %</p>
                        </div>
                        <div class="project-box-footer">
                            <div class="participants"></div>
                            <div class="footer-msg" style="color: #096c86;">
                                59 G
                            </div>
                        </div>
                    </div>
                </div>
                <div class="project-box-wrapper" id="ws-delay">
                    <div class="project-box" style="background-color: #ffd3e2;">
                        <div class="project-box-header">
                            <span>Server Delay Analysis</span>
                            <div class="more-wrapper">
                                <button class="project-btn-more">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
                                        <circle cx="12" cy="12" r="1" />
                                        <circle cx="12" cy="5" r="1" />
                                        <circle cx="12" cy="19" r="1" /></svg>
                                </button>
                            </div>
                        </div>
                        <div class="project-box-content-header">
                            <p class="box-content-header"><i class="fa-solid fa-magnifying-glass-chart"></i> WebSocket Delay Analysis</p>
                            <p class="box-content-subheader">wss delay</p>
                        </div>
                        <div class="box-progress-wrapper">
                            <p class="box-progress-header">Delay</p>
                            <div class="box-progress-bar">
                                <span class="box-progress" style="width: 20%; background-color: #df3670"></span>
                            </div>
                            <p class="box-progress-percentage">0 ms</p>
                        </div>
                        <div class="project-box-footer">
                            <div class="participants"></div>
                            <div class="footer-msg" style="color: #df3670;">
                                good
                            </div>
                        </div>
                    </div>
                </div>
                <div class="project-box-wrapper" id="recv">
                    <div class="project-box" style="background-color: #c8f7dc;">
                        <div class="project-box-header">
                            <span>Network - Receive</span>
                            <div class="more-wrapper">
                                <button class="project-btn-more">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
                                        <circle cx="12" cy="12" r="1" />
                                        <circle cx="12" cy="5" r="1" />
                                        <circle cx="12" cy="19" r="1" /></svg>
                                </button>
                            </div>
                        </div>
                        <div class="project-box-content-header">
                            <p class="box-content-header"><i class="fa-solid fa-satellite-dish"></i> Total Receive</p>
                            <p class="box-content-content full-width">0.00 GiB</p>
                        </div>

                        <div class="box-progress-wrapper">
                            <p class="box-progress-percentage">0 bytes</p>
                        </div>
                        <div class="project-box-footer">
                            <div class="participants"></div>
                            <div class="footer-msg" style="color: green;">
                                + 0.0 KiB
                            </div>
                        </div>
                    </div>
                </div>
                <div class="project-box-wrapper" id="send">
                    <div class="project-box" style="background-color: #d5deff;">
                        <div class="project-box-header">
                            <span>Network - Send</span>
                            <div class="more-wrapper">
                                <button class="project-btn-more">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical">
                                        <circle cx="12" cy="12" r="1" />
                                        <circle cx="12" cy="5" r="1" />
                                        <circle cx="12" cy="19" r="1" /></svg>
                                </button>
                            </div>
                        </div>
                        <div class="project-box-content-header">
                            <p class="box-content-header"><i class="fa-solid fa-paper-plane"></i> Total Send</p>
                            <p class="box-content-content full-width">0.00 GiB</p>
                        </div>
                        <div class="box-progress-wrapper">
                            <p class="box-progress-percentage">0 bytes</p>
                        </div>
                        <div class="project-box-footer">
                            <div class="participants"></div>
                            <div class="footer-msg" style="color: green;">
                                + 0.0 KiB
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="messages-section without-scrollbar">
            <button class="messages-close">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle">
                    <circle cx="12" cy="12" r="10" />
                    <line x1="15" y1="9" x2="9" y2="15" />
                    <line x1="9" y1="9" x2="15" y2="15" /></svg>
            </button>
            <div class="projects-section-header">
                <p>Website Data</p>
            </div>
            <div class="projects-section-line">
                <div class="projects-status" style="transform: translateX(10%);gap: 20px;" onclick="window.location.href='https://github.com/zmh-program/Zh-Website/'">
                    <div class="item-status">
                        <span class="status-number" id="star">Unknown</span>
                        <span class="status-type">Stars</span>
                    </div>
                    <div class="item-status">
                        <span class="status-number" id="fork">Unknown</span>
                        <span class="status-type">Forks</span>
                    </div>
                    <div class="item-status">
                        <span class="status-number" id="size">Unknown</span>
                        <span class="status-type">Repo Size</span>
                    </div>
                </div>
            </div>
            <div class="messages">
                <div class="message-box">
                    <i class="fa-solid fa-chart-area"></i>
                    <div class="message-content">
                        <div class="message-header">
                            <div class="name">Dynamic Request</div>
                            <div class="star-checkbox">
                                <input type="checkbox" id="star-2">
                                <label for="star-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
                                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
                                </label>
                            </div>
                        </div>
                        <div class="area-chart message-line" id="req-chart-container"></div>
                        <p class="message-line right" style="font-size: 20px;">
                            0 + 0
                        </p>
                        <p class="message-line right" id="dynamic-offset" style="font-size: 18px;">
                            + 0
                        </p>
                    </div>
                </div>
                <div class="message-box">
                    <i class="fa-solid fa-chart-line"></i>
                    <div class="message-content">
                        <div class="message-header">
                            <div class="name">Site Requests (7 Days)</div>
                            <div class="star-checkbox">
                                <input type="checkbox" id="star-3">
                                <label for="star-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
                                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
                                </label>
                            </div>
                        </div>
                        <p class="message-line">

                        </p>
                        <div class="area-chart message-line" id="site-request-chart"></div>
                        <p class="message-line right">
                            7 Days of Site Requests
                        </p>
                    </div>
                </div>
                <div class="message-box">
                    <i class="fa-solid fa-user-group"></i>
                    <div class="message-content">
                        <div class="message-header">
                            <div class="name">Users</div>
                        </div>
                        <p class="message-line">
                            I am really impressed! Can't wait to see the final result.
                        </p>
                        <p class="message-line right">
                            Registered Users
                        </p>
                    </div>
                </div>
                <div class="message-box">
                    <i class='bx bx-git-repo-forked'></i>
                    <div class="message-content">
                        <div class="message-header">
                            <div class="name">Forks</div>
                            <div class="star-checkbox">
                                <input type="checkbox" id="star-4">
                                <label for="star-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-star">
                                        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
                                </label>
                            </div>
                        </div>
                        <p class="message-line"></p>
                        <div class="github-card" id="fork-list" style="transform: translateX(-20px);"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="static/js/dynamic-chart.js"></script>
<script src="static/js/github-query.js"></script>
<script src="static/js/index.js"></script>
<script src="static/js/progressbar.js"></script>
<script src="static/js/static-chart.js"></script>
<script src="static/js/network.js"></script>
<script>
    updateSiteRequestChart([12000, 13200, 10100, 13400, 9000, 23000, 21000]);
    setInterval(
        function (){
            updateDynamicRequestChart(Math.round(Math.random() * 100) + 100);
        },
        500,
    );
    setInterval(function (){roundProgressUpdate(cpu_progress_dom, (Math.random() * 100).toFixed(1));}, 1000);
    setInterval(function (){roundProgressUpdate(ram_progress_dom, (Math.random() * 100).toFixed(1));}, 1000);
    setInterval(function (){roundProgressUpdate(rom_progress_dom, (Math.random() * 100).toFixed(1));}, 1000);
    setInterval(function (){wsProgressUpdate((Math.random() * 2000).toFixed(1));}, 1000);
    initGithubRepositoryData("django", "django");
    setInterval(function (){recv.update(Math.random() * 2000000);}, 1000);
    setInterval(function (){send.update(Math.random() * 2000000);}, 1000);
</script>
</body>
</html>